<template>
  <div>
    <div class="App page-padding">
      <div class='header'>
        <span class='font-bolder'>本月激励</span>
        <span class='font-middle'>数据更新至03-31 15:20:02</span>
      </div>
      <div class='count-container bgc-blue'>
        <span class='font-middle'>本月手机销量</span>
        <span class='font-middle'>本月预估激励（元）</span>
        <span class='font-bolder'>297</span>
        <span class='font-bolder'>4,000</span>
      </div>
      <div class='header'>
        <span class='font-bolder'>进行中的政策</span>
        <span class='font-middle'>数据更新至03-31 15:20:02</span>
      </div>
      <div class='card bgc-gray'>
        <p class='font-bolder arrow-icon' @click="goDeatil('荣耀50SE系列')">荣耀激励政策 机型：荣耀50SE系列</p>
        <p class='font-middle'>政策日期：2022-04-01至2022-04-30</p>
        <div class='line'></div>
        <p class='font-middle'>预计个人激励：<span class='num'>200</span>元</p>
        <p class='font-middle'>我的销量： <span class='num'>4</span>件 单件可得<span
            class='num orange'>50</span><span class='orange'>元</span> 上不封顶</p>
        <!-- <p class='font-middle'>我的销量： <span class='num'>80</span>件 再销售 <span
            class='num orange'>20</span><span class='orange'>件</span> 可得 <span
            class='num orange'>40</span><span class='orange'>元</span></p>
        <div class='step-container'>
          <van-steps :active="1" inactive-color="gray" active-color="orange">
            <van-step>10元/0件</van-step>
            <van-step>40元/100件</van-step>
            <van-step>50元/300件</van-step>
          </van-steps>
        </div> -->
      </div>
      <div class='card bgc-gray'>
        <p class='font-bolder arrow-icon' @click="goDeatil('小米Note11E系')">小米激励政策 机型：小米Note11E系</p>
        <p class='font-middle'>政策日期：2022-02-01至2022-02-30</p>
        <div class='line'></div>
        <p class='font-middle'>预计个人激励：<span class='num'>300</span>元</p>
        <p class='font-middle'>我的销量： <span class='num'>6</span>件 单件可得<span
            class='num orange'>50</span><span class='orange'>元</span> 上不封顶</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Step, Steps } from 'vant';

export default {
  components: {
    [Step.name]: Step,
    [Steps.name]: Steps,
  },
  methods: {
    goDeatil(brand) {
      this.$router.push({
        path: `/detail/${brand}`,
      });
    },
  },
};

</script>

<style scoped>
@import url('../../assets/styles/index.css');
.font-bolder{
  font-size: 20px;
  font-weight: bolder;
}

.font-middle{
  font-size: 12px;
  color: rgb(75, 73, 73);
}

.count-container .font-bolder{
  font-size: 20px;
  font-weight: bolder;
  color: white;
}

.count-container .font-middle{
  font-size: 14px;
  color: rgb(75, 73, 73);
  color: white;
}

.App{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  box-sizing: border-box;
  box-sizing: border-box;
}

.App .header{
  padding: 15px 0px;
  display: flex;
  align-items: baseline;
}

.header span:first-child{
  margin-right: 10px;
}

.count-container{
  border-radius: 12px;
  height: 120px;
  display: grid;
  padding: 15px 20px 0px 20px;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}

.count-container span:first-child{
  grid-row: 1;
  grid-column: 1;
}

.count-container span:first-child::before{
  content: '';
  display: inline-block;
  height: 100%;
  line-height: 100%;
  vertical-align: middle;
}

.count-container span:nth-child(2)::before{
  content: '';
  display: inline-block;
  height: 100%;
  line-height: 100%;
  vertical-align: middle;
}

.count-container span:nth-child(2){
  vertical-align: baseline;
  grid-row: 1;
  grid-column: 2;
}
.count-container span:nth-child(3){
  grid-row: 2;
  grid-column: 1;
}
.count-container span:nth-child(4){
  grid-column: 2;
  grid-column: 2;
}

.card{
  margin-bottom: 20px;
  padding: 15px 15px;
}

.card p{
  min-height: 30px;
  vertical-align: middle;
}

.arrow-icon::after{
  content: '>';
  float: right;
}

.card .font-bolder{
  font-size: 16px;
  font-weight: bolder;
}

.card .font-middle{
  font-size: 12px;
  font-weight: bolder;
}

.card .line{
  border-top: 0.5px solid rgba(189, 186, 186, 0.795);
  margin-bottom: 10px;
}

.card .num{
  font-size: 18px;
}

</style>
<style>
.step-container .van-steps{
  background-color: rgba(235, 228, 228, 0.863);
}
.step-container  .van-step__circle-container{
  background-color: rgba(235, 228, 228, 0.863);
}
</style>
